import React from 'react';
import { Tooltip } from 'antd';
import useStyles from './style';

const linkIcon = (
  <svg
    t="1691656487440"
    className="bc-icon"
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="33688"
    width="32"
    height="32"
  >
    <path
      d="M437.333333 213.333333a10.666667 10.666667 0 0 1 10.666667 10.666667v64a10.666667 10.666667 0 0 1-10.666667 10.666667H213.333333v512h512V586.666667a10.666667 10.666667 0 0 1 10.666667-10.666667h64a10.666667 10.666667 0 0 1 10.666667 10.666667v298.666666a10.666667 10.666667 0 0 1-10.666667 10.666667h-661.333333a10.666667 10.666667 0 0 1-10.666667-10.666667v-661.333333a10.666667 10.666667 0 0 1 10.666667-10.666667z m448-85.333333a10.666667 10.666667 0 0 1 10.666667 10.666667v341.333333a10.666667 10.666667 0 0 1-10.666667 10.666667h-64a10.666667 10.666667 0 0 1-10.666666-10.666667v-206.293333L507.733333 576a10.666667 10.666667 0 0 1-15.146666 0L448 531.413333a10.666667 10.666667 0 0 1 0-15.146666L750.293333 213.333333H544a10.666667 10.666667 0 0 1-10.666667-10.666666v-64a10.666667 10.666667 0 0 1 10.666667-10.666667z"
      p-id="33689"
    ></path>
  </svg>
);

const eventIcon = (
  <svg
    t="1691656756580"
    className="bc-icon"
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="47947"
    width="32"
    height="32"
  >
    <path
      d="M458.286 421.32l86.542 501.754c0 0 63.958-65.842 116.759-111.792l116.1 155.425c4.677 6.317 14.86 6.729 22.641 1.038l49.574-36.225c7.821-5.715 10.369-15.481 5.647-21.796l-112.93-151.18c58.99-23.786 156.15-50.855 156.15-50.855l-440.481-286.368zM318.59 653.020l-128.849 94.176c-19.478 14.262-22.995 41.686-7.578 62.013 15.422 20.269 43.885 25.605 63.299 11.406l128.849-94.176c19.915-14.574 23.243-43.157 7.826-63.421-15.359-20.306-43.655-24.572-63.547-9.998v0zM926.736 264.799c-15.422-20.262-43.264-24.818-63.61-9.961l-127.937 93.581c-20.326 14.86-23.843 42.37-8.447 62.635 15.422 20.262 43.878 25.605 64.207 10.746l127.941-93.581c20.347-14.863 23.243-43.138 7.845-63.42v0zM328.958 167.95c-15.106-19.853-42.905-24.407-63.295-9.523-19.066 13.951-22.995 41.686-7.888 61.537l100.081 131.623c15.111 19.91 43.322 24.091 62.383 10.139 20.326-14.86 23.913-42.308 8.8-62.197l-100.081-131.58zM581.667 324.348c24.818 4.017 47.648-12.691 50.855-37.199l20.080-159.13c3.206-24.464-14.198-47.396-39.392-51.826-24.814-4.017-47.644 12.686-50.855 37.132l-20.138 159.194c-3.105 24.508 14.322 47.402 39.451 51.83v0zM338.854 501.924c2.421-24.573-14.985-47.465-39.387-51.831l-161.245-26.512c-25.664-3.396-48.062 12.978-50.857 37.195-3.7 25.541 13.725 48.435 39.392 51.826l161.241 26.518c24.383 4.24 46.838-12.153 50.855-37.194v0zM338.854 501.924z"
      p-id="47948"
    ></path>
  </svg>
);

const ICON_LIST = {
  link: linkIcon,
  event: eventIcon,
};

function ColumnTitle({ title, tip }) {
  const { styles, cx } = useStyles();

  if (!tip) return title;

  const { icon, type, ...tooltip } = tip;

  const iconElement = (
    <span className={cx(styles, 'bc-base-list-column-title-icon')}>{icon || ICON_LIST[type || 'event']}</span>
  );

  if (tooltip.title === false) {
    return (
      <React.Fragment>
        {iconElement}
        {title}
      </React.Fragment>
    );
  }

  return (
    <React.Fragment>
      <Tooltip {...tooltip} title={tooltip.title || '此列数据可点击'}>
        {iconElement}
      </Tooltip>
      {title}
    </React.Fragment>
  );
}

export default ColumnTitle;
